星尘

6. 使用redux-immutable统一数据格式

发表于 更新于 分类于

在上次使用immutable的过程中，我们将common/header/index.js中的mapStateToProps写为了

1
2
3
4
5
const mapStateToProps = (state) => {
	return {
		inputValue: state.header.get('inputValue') 
	}
}

可见state.header是一个immutable对象，我们使用immutable的get方法就能获取对应的值。但是我们希望将state也变成一个immutable对象，这样就全用get方法了，而不是state.header。

安装

1
cnpm install redux-immutable

state.header.get(‘inputValue’) 中的state是最外层中的reducer中创建出来的，所以我们去到/src/store/reducer.js

1
2
3
4
5
6
7
8
9
10
11
// import { combineReducers } from 'redux'
// 之前的combineReducers 是从redux中导入的，现在我们从redux-immutable导入combineReducers
// 这个combineReducers可以创建不可变的immutable对象
import { combineReducers } from 'redux-immutable'
import { reducer as herderReaducer } from '../common/header/store';

const reducer = combineReducers({
	header: herderReaducer
})

export default reducer;

从新改写common/header/index.js中的mapStateToProps

1
2
3
4
5
6
7
8
9
10
11
const mapStateToProps = (state) => {
	return {
		// inputValue: state.header.get('inputValue') 这是没有使用redux-immutable
		// 只使用immutable的写法

		// 下面是我们使用redux-immutable后的写法，此时因为将/src/stare下的reducer中的state也变成了immutable对象
		// 所以直接使用get就行
		inputValue: state.get('header').get('inputValue')
		// 上面的写法和 inputValue: state.getIn(['header', 'inputValue']) 效果一样
	}
}

immutable文档

代码地址